<template>
  <!-- 总体 -->
  <div>
    <!-- 头部 -->
    <div class="topbar">
      <div class="left">
        <span>员工信息浏览系统</span>
      </div>
      <!-- 搜索 -->
      <div class="right">
        <el-input v-model="input" @change="search" placeholder="请输入查询内容">
          <!-- 放大镜 -->
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <!-- 中间展示 -->
    <div class="staff">
      <div
        class="men"
        v-for="(item, index) in list"
        :key="index"
        @click="selectMen(item)"
      >
        <!-- 人像 -->
        <div class="staff-img">
          <img :src="item.image" alt="人像" />
        </div>
        <!-- 信息 -->
        <div class="staff-msg">
          <div>
            <h2>{{ item.name }}</h2>
          </div>
          <div>{{ item.gender }}</div>
          <div>申请职位：{{ item.post }}</div>
          <div>毕业学校：{{ item.school }}</div>
          <div>联系方式：{{ item.tel }}</div>
        </div>
      </div>
    </div>
    <!-- 选中展示 -->
    <div class="footer" v-if="activeMen != undefined">
      <div class="footer-left">
        <div class="title">基本信息</div>
        <div class="footer-msg">
          <div>
            <span>姓名：{{ activeMen.name }}</span>
            <span>性别：{{ activeMen.gender }}</span>
            <span>出生年月：{{ activeMen.birthday }}</span>
            <span>学历：{{ activeMen.education }}</span>
          </div>
          <div>
            <span>专业：{{ activeMen.specialty }}</span>
            <span>毕业院校：{{ activeMen.school }}</span>
            <span>住址：{{ activeMen.address }}</span>
            <span>电话：{{ activeMen.tel }}</span>
          </div>
        </div>
      </div>
      <div class="footer-right">
        <div class="title"><h4>个人经历</h4></div>
        <div class="time">
          <div class="time-head">
            <span>开始时间</span>
            <span>结束时间</span>
            <span>地点</span>
          </div>
          <div
            v-for="(item, index) in activeMen.experiences"
            :key="index"
            class="time-list"
          >
            <div>{{ item.start }}</div>
            <div>{{ item.end }}</div>
            <div>{{ item.location }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright">
      如果你觉得对你有用的话，就给我gitee点个星星，如果你觉得毫无作用，那就请将其拖入回收站
    </div>
  </div>
</template>
<script>
import Staff from "@/assets/staff.json";

export default {
  data() {
    return {
      activeMen: undefined,

      input: "",
      list: "",
    };
  },
  methods: {
    // 获取数据
    getJson() {
      axios.get("@/assets/staff.json").then((res) => {
        console.log(res.body);
      });
    },
    // 选中
    selectMen(item) {
      this.activeMen = item;
    },
    // 搜索
    search() {
      // 获取输入内容
      if (this.input == "") {
        this.getJson();
      } else {
        this.list = this.list.filter(
          (element) => element.name.indexOf(this.input) !== -1
        );
      }
    },
  },
  mounted() {
    this.list = Staff.Staff;
    console.log(this.list)
  },
};
</script>

<style scoped>
/* 顶部 */
.topbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;

  height: 80px;
  justify-content: space-between;
  background-color: #4f8dcd;
}
/* 左 */
.left {
  margin-left: 30px;

  color: white;
  font-size: 24px;
}

.left img {
  vertical-align: middle;
  margin-right: 10px;
}
img {
  width: 80px;
  height: 90px;
}
/* 右边 */
.right {
  margin-right: 100px;
}

/* 中间
 */
.staff {
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
height: 290px;
 overflow-y: scroll;

  justify-content: space-around;
}

.men {
   
  display: flex;
  flex-direction: row;
  margin: 5px;
  align-items: center;
  box-shadow: 1px 1px 5px #757575;
  border-radius: 10px;

  color: rgb(96, 96, 96);
  font-size: 12px;
  /* 线性渐变 */
  background-color: linear-gradient(to bottom, #fefefe, #e5e5e5);
  width: 23%;
}

.men:hover {
  background: linear-gradient(to bottom, #feeca5, #fffbd9);
}

.staff-img {
  margin: 20px 20px 20px 10px;
}

.staff-img img {
  border: 2px solid #5fb64a;
  border-radius: 5px;
}

.staff-msg {
  width: 200px;
}

/* 下面 */
.footer {
  display: flex;
  width: 97%;

  margin: auto;
  color: #333333;
}

.footer-left {
  width: 35%;
  height: 200px;
  margin-right: 10px;
  border: 1px solid black;
}

/* 基本信息 */
.title {
  padding: 6px 20px;
  color: #fff;
  background: linear-gradient(to bottom, #4f983d, #95ac8f);
}

.footer-right {
  width: 65%;
  height: 200px;
  overflow-y: scroll;
  border: 1px solid black;
}
/* 基本信息里面的个人信息 */
.footer-msg {
  display: flex;
  margin: 10px;
}

.footer-msg div span {
  display: flex;
  flex-direction: column;
  padding: 5px 20px;

  text-align: left;
}

/* 底部右边 */
.time {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.time-list {
  display: flex;
  text-align: center;
  justify-content: space-around;
  border: 1px solid #ccc;
  padding: 10px 0;
}

.time-head {
  display: flex;
  text-align: center;
  padding: 10px 0;
  border: 1px solid #ccc;
  justify-content: space-around;
}

.time-list:hover {
  background: linear-gradient(to right, #feea9d, #fce68c);
}
/* 底部版权 */
.copyright {
  /* 固定在底部 */
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: black;
  background-color: #ccc;
  font-size: 20px;
}
</style>
